<template>
    <div class="c-main">
        <div>
            <br>
            <Row align="middle" :gutter="10">
                <i-col justify="left" span="12">
                    <h2>我的授课列表</h2>
                </i-col>
                <i-col style="text-align:right" span="12">
                    <a v-on:click="createCourse">创建课程</a>
                </i-col>
            </Row>
            <br>
            <Table border :columns="columns" :data="courseList" :highlight-row="true"></Table>
        </div>
        <br>
    </div>
</template>
<script>
import CourseAPI from '@/api/knowledge/CourseAPI';
import ChapterAPI from '@/api/knowledge/ChapterAPI';
import ChapterList from './ChapterList.vue';
export default {
    data() {
        return {
            components: {
                ChapterList
            },
            courseList: [],
            columns: [
                {
                    type: 'expand',
                    width: 50,
                    render: (h, params) => {
                        return h(ChapterList, {
                            props: {
                                courseId: params.row.id
                            }
                        })
                    }
                },
                {
                    title: '类别',
                    key: 'categoryName',
                    width: 110
                },
                {
                    title: '主题',
                    key: 'topic',
                    width: 300
                },
                {
                    title: '创建时间',
                    key: 'gmtCreated',
                    width: 155
                },
                {
                    title: '浏览量',
                    key: 'views',
                    width: 80
                }, {
                    title: '简介',
                    key: 'profile'
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 200,
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.uploadChapter(params.row.id, params.row.topic);
                                    }
                                }
                            }, '上传章节'),
                            h('Button', {
                                props: {
                                    type: 'success'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.displayCourseDetail(params.row.id);
                                    }
                                }
                            }, '去看看'),
                        ]);
                    }
                }
            ]
        }
    },
    mounted() {
        this.fetchMyCourseList();
    },
    methods: {
        fetchMyCourseList() {
            let _this = this;
            CourseAPI.fetchMyCourseList(function(resp) {
                _this.courseList = resp;
            }, function(error) {
                _this.$Message.error("操作失败【" + error + "】");
            })
        },
        createCourse() {
            this.$router.push({ path: "/Know-how/course/create" });
        },
        displayCourseDetail(courseId) {
            this.$router.push({ path: "/Know-how/course/detail/" + courseId });
        },
        uploadChapter(courseId, topic) {
            this.$router.push({ name: "chapterUpload", params: { courseId: courseId, topic: topic } }, );
        }
    }
}
</script>
<style scoped>
.c-main {
    width: 70vw;
    height: auto;
    margin: 0 auto;
    margin-bottom:40px;
    margin-top: 70px;
}
</style>
